<template>
  <div class="container">
    <!-- 顶部banner -->
    <ne-swiper carousel-type="2" />
    <div class="c--card-body">
      <div class="card-item gradient-1" @click="$toPage('/pages/zhfw/myMake')">
        <span>我的预约</span>
        <van-icon name="arrow" class="arrow" />
        <img src="@/static/image/wdyy.png" style="width: 34px; height: 34px" />
      </div>
      <div
        class="card-item gradient-2"
        @click="$toPage('/pages/zhfw/myNotice')"
      >
        <span>我的待办</span>
        <van-icon name="arrow" class="arrow" />
        <img src="@/static/image/wddb.png" />
      </div>
      <div
        class="card-item gradient-3"
        @click="$toPage('/pages/consult/index')"
      >
        <span>消息</span>
        <van-icon name="arrow" class="arrow" />
        <img src="@/static/image/wdxx.png" />
      </div>
    </div>
    <!-- 功能导航 -->
    <nav-list :options="options" />
    <div class="section">
      <ne-title title="生活缴费" />
      <van-row :gutter="20">
        <van-col
          span="12"
          v-for="(item, index) in dataList.filter((i) => i.linkSubType === '2')"
          :key="item.id"
          :index="index"
          style="margin-bottom: 10px"
        >
          <serve-card :row="item" is-serve />
        </van-col>
      </van-row>
      <ne-title title="综合服务" />
      <van-row :gutter="20">
        <van-col
          span="12"
          v-for="(item, index) in dataList.filter((i) => i.linkSubType === '3')"
          :key="item.id"
          :index="index"
          style="margin-bottom: 10px"
        >
          <serve-card :row="item" />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import NavList from '../../components/NavList.vue'
import NeTitle from '../../components/NeTitle.vue'
import ServeCard from './components/ServeCard.vue'
import NeSwiper from '../../components/NeSwiper.vue'
import { tbExternalLinkList } from '../../api/tbExternalLink'

export default {
  name: 'wx_pages_zhfw_index',
  components: { NeSwiper, ServeCard, NeTitle, NavList },
  data() {
    return {
      options: [
        {
          url: '/pages/zhfw/serviceAged',
          title: '养老服务',
          icon: '/image/menu-13.png',
        },
        {
          url: '/pages/zhfw/communityPage',
          title: '社区医疗',
          icon: '/image/menu-14.png',
        },
        {
          url: '/pages/zhfw/communityTeach',
          title: '社区教育',
          icon: '/image/menu-15.png',
        },
        {
          url: '2##7',
          title: '青年创客',
          icon: '/image/menu-16.png',
        },
      ],
      dataList: [],
    }
  },
  methods: {
    async search() {
      this.$showLoading('查询中...')
      let res = await tbExternalLinkList({ linkType: '2' })
      this.$hideLoading()
      if (res.data && res.data.length > 0) {
        this.dataList = res.data
      } else {
        this.dataList = []
      }
    },
  },
  onLoad() {
    this.search()
  },
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 12px;
  overflow: auto;
  .c--card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    .card-item {
      flex: 1;
      padding: 6px 20px 6px 6px;
      height: 60px;
      border-radius: 8px;
      position: relative;
      font-size: 16px;
      img {
        position: absolute;
        bottom: 4px;
        right: 6px;
        width: 36px;
        height: 36px;
      }
      .arrow {
        position: absolute;
        top: 6px;
        right: 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &.gradient-1 {
        background-image: linear-gradient(to bottom right, #ffecd2, #fcb69f);
      }
      &.gradient-2 {
        background-image: linear-gradient(to bottom right, #fff3e0, #ffb74d);
      }
      &.gradient-3 {
        background-image: linear-gradient(to bottom right, #bbdefb, #64b5f6);
      }
    }
  }
}

/* Banner */
.banner {
  width: 100%;
  height: 180px;
  background-color: #0052d9;
}

/* 法治讲堂 */
.section {
  margin-top: 20 rpx;
}

.section-title {
  font-size: 34 rpx;
  color: $uni-color-primary;
  font-weight: 500;
  margin: 20 rpx 0;
  display: inline-block;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20 rpx;
}
</style>
